<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<meta charset="utf-8" />
<title>美站库 炫美网站大全</title>
<link rel="stylesheet" type="text/css" href="images/index.css" />
</head>
<body>
<div id="header">
	<div id="top" class="auto">
	<div class="logo">
		<h1>
			<img src="images/logo.png" />
			<span>炫美网站大全</span>
		</h1>
	</div>
	<div class="serach">
		<form>
		<input id="searchText" class="text" type="text" />
		<input id="searchButton" class="submit" type="button" value="搜索" />
		</form>
		</div>
	</div>	
	<div id="nav"  class="auto">
		<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">提交站点</a></li>
		</ul>
	</div>
	<div id="runplay"  class="auto">
	<div class="left">
		<a href="#"><img src="images/img1.jpg" /></a>
	</div>
		<div class="right">
			<dl>
				<dt id="runplayH">炫美网站，尽在美站库</dt>
				<dd class="txt">本网站收集互联网上各种炫美网站......</dd>
				<dd class="btn">
					<a href="#">查看更多</a>
				</dd>
			
			
			</dl>
		</div>
	</div>
</div>
<div id="main">
	<div id="main1">
		<div id="wrap">
			<div id="leftBody">
				<div class="leftDiv1">
					<h2>搜索</h2>
					<p>美站库是<a href="http://www.sifangku.com" target="_blank">私房库</a>视频html课程中的第一个项目实战课！</p>
				</div>
				<div class="leftDiv2">
					<h2>搜索页面</h2>
					<ul>
						<li>
							<a href="https://movie.douban.com/subject/20438964/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537667301.webp" height="125px" /></a>
							<p>无敌破坏王2：大闹互联网</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/30331149/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544313786.webp" height="125px" /></a>
							<p>白蛇：缘起</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/26374197/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2542867516.webp" height="125px" /></a>
							<p>蜘蛛侠：平行宇宙</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/26147417/"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2538826177.webp" height="125px" /></a>
							<p>神奇动物：格林德沃之罪</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/3168101/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537158013.webp" height="125px" /></a>
							<p>毒液：致命守护者</p>
						</li>
					</ul>
				</div>
				<div class="leftDiv3">
					<a href="#">查看更多</a>
				</div>
		</div>
		<div id="rightBody">
			<div class="rightDiv1">
				<h2>酷文</h2>
				<ul>
					<li>
						<h3><a href="#" target="blank">不好不好不好</a></h3>
						<p>好的好的好的好的好的好的好的好的好的好的好的好的...</p>
					</li>
					<li>
						<h3><a href="#" target="blank">不好不好不好</a></h3>
						<p>好的好的好的好的好的好的好的好的好的好的好的好的...</p>
					</li>
					<li>
						<h3><a href="#" target="blank">不好不好不好</a></h3>
						<p>好的好的好的好的好的好的好的好的好的好的好的好的...</p>
					</li>
				</ul>
			</div>
			<div class="rightDiv2">
			<dl class="dl1">
				<dt><a href="#">随便就随便</a></dt>
				<dd>随便就随便</dd>
			</dl>
			<dl class="dl2">
				<dt><a href="#">随便就随便</a></dt>
				<dd>随便就随便</dd>
			</dl>
			</div>
		</div>
	</div>
</div>
<div id="footer">
	<p class="p1">
		<a href="#" target="_blank">首页</a>
		<a href="#" target="_blank">美站</a>
		<a href="#" target="_blank">酷文</a>
		<a class="last" href="#" target="_blank">联系我们</a>
	</p>
	<p>
	Copyright (c) 2019 I <a href="http://www.sifangku.com" target="_blank">私房库</a>
	</p>
</div>
</body>
<script>
	$(document).ready(function(){
	
	var ajaxData = [];
	var titles=[];
	
		$.ajax({url:"data/douban300.json",
		
	success:function(result){
		ajaxData=result;
		$("#rsCount").html("ajax访问成功");
		var i=0;
	for (i=0;i<ajaxData.subjects.length;i++)
	{
	titles.push(ajaxData.subjects[i].title);
	}
	
}});

$("#searchText").autocomplete({
	source:titles
});

$("#searchButton").click(function(){
	var usrIp=$("#searchText").val();
	$("#runplayH").html("您刚输入: "+usrIp);
	alert(usrIp);
	})
})
</script>

</html>